<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="where" style="background: #fff; padding: 10px 30px; font-size: 14px; color: #595959;">
          当前位置：<router-link to="/index" style="color: #409eff;">分销后台</router-link>>
          <router-link to="/productionBasismanag" style="color: #409eff;">产品渠道管理</router-link>>
          <router-link to="/productionBasismanag/productionBasismanagDj" style="color: #409eff;">自动生产对接</router-link>>
          管理对接产品
        </div>

        <div class="hei10"></div>

        <div class="o_ul">
          <router-link class="o_li" to="/productionBasismanag">产品渠道中心</router-link>
          <router-link class="o_li " to="/productionBasismanag/productionBasismanagSoldout">已下架的产品</router-link>
          <router-link class="o_li acts bgw" to="/productionBasismanag/productionBasismanagDj">自动生产对接</router-link>
        </div>

        <div class="t_add_cont">
          <router-link class="back" to="/productionBasismanag/productionBasismanagDj"><i
              class="el-icon-back"></i>返回自动生产对接</router-link>
          <!-- tips -->
          <div class="t_tips_box">
            <div>自动生产可以把订单信息通过接口自动提交给运营商或上游系统并返回生产信息</div>
            <div>申请自动生产接口对接
              <span @click="openwx" class="t_chatkf">联系客服微信</span>
            </div>
          </div>
          <div style='margin-bottom:10px'>
            <el-button @click="opendev('')" round type="danger">添加产品</el-button>
          </div>
          <!-- 列表 -->
          <el-table :header-cell-style="{background:'#E6E6E6',color:'#3D3D3D'}" :data="tableData" style="width: 100%">
            <el-table-column align="center" prop="name" label="产品名称">
            </el-table-column>
            <el-table-column align="center" prop="sku" label="产品编码">
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="添加时间">
            </el-table-column>
            <el-table-column align="center" prop="kfpz" label="开发配置">
              <template slot-scope="scope">
                已配置
                <el-button @click="opendev(scope.row)" type="text">编辑</el-button>
              </template>
            </el-table-column>

            <el-table-column align="center" label="选号接口">
              <template slot-scope="scope">

                <div v-if="scope.row.take_number != 0">当前已开启</div>
                <div v-if="scope.row.take_number == 0">当前未开启</div>
                <div>
                  <el-button @click="change_take_number(scope.row,1)" type="text">点击开启</el-button>
                  <el-button @click="change_take_number(scope.row,0)" type="text">点击关闭</el-button>

                </div>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button @click="del(scope.row.up_id)" type="text">删除</el-button>
                <el-button v-if="$route.query.upload_resource==2"
                  @click="getzybtn(scope.row.product_id,scope.row.data,scope.row)" type="text">上传资源</el-button>

                  <el-button type="text"  @click="$router.push('/productionBasismanag/xianzhi?id='+scope.row.product_id)">提单配置</el-button>
              </template>
            </el-table-column>
          </el-table>


        </div>

      </div>
    </div>
    <!-- <foot></foot> -->
    <!-- 二维码弹窗 -->
    <el-dialog center title="联系微信客服" :visible.sync="chatwxshow" width="300px">
      <img style="width: 100%;" src="../../../static/kefu.png" alt="">
    </el-dialog>
    <!-- 添加/编辑 -->
    <el-dialog center title="添加/编辑" :visible.sync="addproshow" width="600px">
      <el-form label-width="120px">
        <el-form-item label="本地产品编码">
          <el-input style="width:250px" v-model="inputadd.product_sku" placeholder="请输入本地产品编码" size="small"></el-input>
          <el-button @click="checkbm(inputadd.product_sku)" type="danger" round>检测</el-button>
          <div v-if="ischeck">
            <div v-if='nopz'>当前产品未配置</div>
            <div v-else>已配置,上游编码为{{upbm}}</div>
          </div>

        </el-form-item>
        <el-form-item label="对应上游编码">
          <el-input v-model="inputadd.upstream_sku" placeholder="请输入对应上游编码" size="small"></el-input>
        </el-form-item>

        <div v-for="(item,index) in inputlistall" :key="index">
          <el-form-item :label="item.name" v-if="item.type != 'address_diy'">
            <el-input v-if='item.type=="text"' @input="inputChange" v-model="inputadd[item.key]" size="small"
              :type="item.type"></el-input>

            <el-radio-group v-if='item.type=="radio"' v-model="inputadd[item.key]">
              <el-radio @change="inputChange" v-for="(item2,index2) in item.data" :key="index2"
                :label="item2.value">{{item2.name}}</el-radio>
            </el-radio-group>

          </el-form-item>
        </div>


        <div class="kflexc" style="width: 100%; margin-bottom: 20px;" v-if="addtidanma">
          <el-button @click="addtidan" type="primary" plain>+添加提单地址</el-button>
        </div>

        <el-button @click="addpro" type="danger" round>确定</el-button>

        <!-- <el-form-item label="上传图片">
                    <el-upload class="avatar-uploader" action="#" :on-change="uploadok" :auto-upload="false" :show-file-list="false">
						<el-button v-if="!upimglink" size="small" type="primary">点击上传</el-button>
						<img :src="upimglink" v-if="upimglink" style="width: 100px;">
					</el-upload>
                </el-form-item> -->
        <!-- <el-form-item v-for="(item,index) in inputlist" :key="index" :label="item.name">
                    <el-input @input="inputChange"  v-model="inputadd[item.key]" size="small" :type="item.type" ></el-input>
                </el-form-item>
				<el-form-item v-for="(item,index) in radiolist" :key="index" :label="item.name">

					<el-radio-group v-model="inputadd[item.key]">

						<el-radio @change="inputChange" v-for="(item2,index2) in item.data"
						:key="index2"
						:label="item2.value" >{{item2.name}}</el-radio>
					</el-radio-group>
				</el-form-item> -->
      </el-form>

    </el-dialog>
    <!-- 获取资源 -->
    <el-dialog center title="获取资源" :visible.sync="showgetzy" width="500px">
      <div style="margin-bottom: 10px;">建议单张图片不要超过2M</div>
      <div style="margin-bottom: 10px;">1、更换{{moban.platform_name}}产品，需要重新上传图片获取资源id</div>
      <div>2、修改触点或商品ID后是否重新上传图片获取资源ID，这个需要自行决定</div>
      <div style="margin-top:20px;margin-bottom:20px">
        <el-upload class="avatar-uploader" action="#" :on-change="uploadok" :auto-upload="false"
          :show-file-list="false">
          <el-button v-if="!upimglink" type="danger" round>点击上传</el-button>
          <img :src="upimglink" v-if="upimglink" style="width: 100px;">
        </el-upload>
      </div>
      <div> <el-button style="margin-right: 20px;" round @click="getid" type="danger">获取资源id</el-button>当前资源ID：
        {{ nowzyid }}
      </div>
    </el-dialog>

    <el-dialog title="添加提单地址" :visible.sync="log" width="600px" :close-on-click-modal="false">
      <div v-for="(item,index) in tidanall" :key="index">
        <div class="kflexbc" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px #ccc solid;">
          <div style="margin-right: 20px;">提单地址{{index+1}}</div>
          <div style="color: #409eff; cursor: pointer;" @click="shanchutianjia(index)">删除</div>
        </div>
        <div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 100px; margin-right: 20px; text-align: right;">省市区</div>
            <div class="kflexc w100">
              <el-input style="width:100px" v-model="item.address_province" placeholder="省"></el-input>
              <el-input style="width:100px" v-model="item.address_city" placeholder="市"></el-input>
              <el-input style="width:100px" v-model="item.address_district" placeholder="区"></el-input>
            </div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 100px; margin-right: 20px; text-align: right;">地址渠道</div>
            <div class="kflexc">
              <el-input style="width:250px" v-model="item.address" placeholder="地址渠道"></el-input>
            </div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 100px; margin-right: 20px; text-align: right;">发展人编码</div>
            <div class="kflexc">
              <el-input style="width:250px" v-model="item.developerCode" placeholder="发展人编码"></el-input>
            </div>
          </div>
          <div class="kflexc" style="margin-bottom: 20px;">
            <div style="width: 100px; margin-right: 20px; text-align: right;">提单数量</div>
            <div class="kflexc">
              <el-input style="width:250px" v-model="item.order_count" placeholder="提单数量"></el-input>
            </div>
          </div>
        </div>
      </div>


      <el-button @click="addtidan2" type="primary" plain>+添加提单地址</el-button>

      <div style="text-align:center">
        <el-button round @click="log = false">取消</el-button>
        <el-button type="danger" round @click="quedingtianjia">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'


  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot
    },
    name: 'productionBasismanagDj',
    data() {
      return {
        addtidanma: false,
        tidanall: [],
        log: false,
        tableData: [],
        //联系微信客服弹窗
        chatwxshow: false,
        //添加弹窗
        addproshow: false,
        //添加数据
        inputadd: {
          product_sku: '',
          upstream_sku: ''
        },
        //动态input
        inputlist: [],
        //动态radio
        radiolist: [],
        //所有动态数据
        inputlistall: [],
        //y_name
        y_name: '',
        //是否点击检查
        ischeck: false,
        //没有配置
        nopz: true,
        //上游编码
        upbm: '',
        upimglink: '',
        get_product_id: '',
        showgetzy: false,
        nowzyid: '',
        shopid: "",
        now_y_name: '',
        now_up_id: ''
      }
    },
    created() {
      //获取上级数据
      this.getoldlist()
      //获取列表
      this.getlist()
      //店铺权限问题
      this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;

    },

    methods: {
      quedingtianjia:function(){
        this.log = false
        this.inputadd.address_diy = this.tidanall
      },
      addtidan: function() {
        if(this.inputadd.address_diy){
          this.tidanall = this.inputadd.address_diy
        }else{
          this.tidanall = []
        }

        this.log = true
      },
      shanchutianjia:function(index){
        this.tidanall.splice(index, 1)
      },
      addtidan2: function() {
        this.tidanall.push({
          address_province:"",
          address_city:"",
          address_district:"",
          address:"",
          developerCode:"",
          order_count :"",
        })
      },

      //打开弹窗
      getzybtn(product_id, data, row) {
        console.log(row)
        if (JSON.parse(data).resource_id) {
          this.nowzyid = JSON.parse(data).resource_id
        } else {
          this.nowzyid = '无'
        }
        this.get_product_id = product_id
        this.now_y_name = row.y_name
        this.now_up_id = row.up_id
        this.showgetzy = true
      },
      //上传图片
      uploadok: function(file) {

        if (file.raw.type != 'image/jpeg' && file.raw.type != 'image/png' && file.raw.type != 'image/jpg') {
          this.$message.error('只能上传图片');
          return false
        }
        var that = this;
        var formData = new FormData();
        formData.append("pic", file.raw);
        formData.append("product_id", this.get_product_id);
        axios.post('/api/plan-market/upstream/channel/upload/resource', formData)
          .then(response => {
            if (response.data.msg.code == 0) {

              // that.upimglink = response.data.data
              this.$message({
                message: '上传成功',
                type: 'success'
              });

            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //获取资源id
      getid() {
        axios.post('/api/plan-market/upstream/channel/get/resource-id', {
            product_id: this.get_product_id,
            y_name: this.now_y_name,
            up_id: this.now_up_id
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '获取成功',
                type: 'success'
              });
              this.nowzyid = response.data.data.resource_id
            } else {
              this.$message.error(response.data.msg.info);

            }


          })
      },
      change_take_number: function(item, who) {
        axios.post('/api/plan-market/upstream/take/number', {
            id: item.product_id,
            open: who
          })
          .then((response) => {
            this.getlist()
          })
      },
      //获取上级数据
      getoldlist() {
        axios.get('/api/plan-market/upstream/channel/config/list', {
            params: {
              channel_id: this.$route.query.channel_id,
              api_type: this.$route.query.api_type
            }
          })
          .then((response) => {
            // console.log(response)
            if (response.data.msg.code == 0) {
              if (this.$route.query.api_type == 2) {
                this.y_name = response.data.data.list[0].y_name

                this.inputlistall = JSON.parse(response.data.data.list[0].upstream_config_type)
              } else {
                this.y_name = response.data.data[0].y_name

                this.inputlistall = JSON.parse(response.data.data[0].upstream_config_type)
              }


              //添加数据绑定
              for (var i = 0; i < this.inputlistall.length; i++) {
                if (this.inputlistall[i].type == 'text') {
                  this.inputadd[this.inputlistall[i].key] = ''
                  this.inputlist.push(this.inputlistall[i])
                }
                if (this.inputlistall[i].type == 'radio') {
                  this.inputadd[this.inputlistall[i].key] = null
                  this.radiolist.push(this.inputlistall[i])
                }
                if (this.inputlistall[i].type == 'address_diy') {
                  this.addtidanma = true
                }

              }
              this.inputadd.product_sku = ''
              this.inputadd.upstream_sku = ''
            } else {
              this.$message.error(response.data.msg.info);
            }


          })
      },
      //获取列表
      getlist() {
        axios.get('/api/plan-market/upstream/product/list', {
            params: {
              channel_id: this.$route.query.channel_id
            }
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }


          })
      },
      //添加、编辑
      opendev(row) {

        var that = this
        this.addproshow = true

        for (var i = 0; i < this.inputlistall.length; i++) {
          this.inputadd[`${this.inputlistall[i].key}`] = ''
        }

        if (row != '') {
          var arr = [];
          for (let i = 0; i < Object.keys(row.datas).length; i++) {
            arr.push({
              name: Object.keys(row.datas)[i],
              value: row.datas[Object.keys(row.datas)[i]]
            })
          }

          //说明是编辑
          this.inputadd.product_sku = row.sku
          this.inputadd.upstream_sku = row.upstream_product_name
          this.inputadd['up_id'] = row.up_id
          for (var i = 0; i < this.inputlistall.length; i++) {
            for (var x = 0; x < arr.length; x++) {

              if (this.inputlistall[i].key == arr[x].name) {
                if (this.inputlistall[i].type === "radio") {
                  console.log(isNaN(arr[x].value * 1))
                  if (!isNaN(arr[x].value * 1)) {
                    this.inputadd[`${this.inputlistall[i].key}`] = arr[x].value * 1
                  } else {
                    this.inputadd[`${this.inputlistall[i].key}`] = arr[x].value
                  }
                } else {
                  // console.log(this.inputlistall[i].key,this.inputlistall[i].type)
                  this.inputadd[`${this.inputlistall[i].key}`] = arr[x].value
                }
              }
            }

          }

        } else {
          this.ischeck = false
          this.inputadd.product_sku = ''
          this.inputadd.upstream_sku = ''
          this.inputadd['up_id'] = ''


        }
      },
      //确定提交
      addpro() {
        this.inputadd['channel_id'] = this.$route.query.channel_id
        this.inputadd['y_name'] = this.y_name

        axios.post('/api/plan-market/upstream/product/create', this.inputadd)
          .then((response) => {
            if (response.data.msg.code == 0) {

              this.$message({
                message: '操作成功',
                type: 'success'
              });
              //获取列表
              this.getlist()
              this.addproshow = false
            } else {
              this.$message.error(response.data.msg.info);
            }

          })
      },
      //检查编码
      checkbm(product_sku) {
        axios.get('/api/plan-market/upstream/check/product', {
            params: {
              product_sku: product_sku
            }
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.ischeck = true

              if (response.data.data == null) {
                this.nopz = true
              } else {
                this.nopz = false
                this.upbm = response.data.data.upstream_product_name
              }
            } else {
              this.$message.error(response.data.msg.info);
            }


          })
      },
      //删除
      del(up_id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/upstream/product/delete', {
              id: up_id
            })
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                //获取列表
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }

            })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      //点击打开客服二维码弹窗
      openwx() {
        this.chatwxshow = true
      },
      inputChange() {
        this.$forceUpdate(); //强制刷新
      }

    }
  }
</script>

<!--

shhhh
12312312312
samguo
chihihuh -->

<style lang="scss" scoped>
  @import "@/assets/zuixin.scss";
  .index {
    /deep/ .el-select {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input {
      min-width: 250px;
      max-width: 100%;
      margin-right: 20px;
    }

    /deep/ .el-input__inner {
      line-height: 36px;
      height: 36px;
      font-size: 12px;
      background: rgb(247, 248, 250);
      border: 0;
    }
    .w100{
      /deep/ .el-input {
        min-width: auto;
        max-width: 100%;
        margin-right: 20px;
      }

    }

    /deep/ .el-range-editor .el-range-input {
      background: #f7f8fa;
    }

    /deep/ .el-button {
      padding: 11px 23px !important;
    }

    /deep/ .el-button--text {
      padding: 11px 0 !important;
    }

    /deep/ .el-button--danger {
      color: #FFF;
      background-color: #2974FF;
      border-color: #2974FF;
    }

    /deep/ .el-input__inner:-moz-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner:-ms-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .el-input__inner::-webkit-input-placeholder {
      color: rgb(140, 140, 140);
    }

    /deep/ .td2 .el-button {
      padding: 11px 0px !important;
    }

    /deep/ .pagination-container .el-select {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input {
      width: 120px;
      margin-right: 20px;
    }

    /deep/ .pagination-container .el-input__inner {
      line-height: 28px;
      height: 28px;
    }

    /deep/ .el-pagination.is-background .btn-prev:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next:disabled {
      background: rgba(246, 246, 246, 0.3);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .el-pagination.is-background .btn-next {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .btn-prev {
      background: rgba(246, 246, 246, 1);
      border: 1px rgba(167, 167, 167, 1) solid;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2974FF;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
      color: #fff;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
      color: #2974FF;
    }

    /deep/ .el-pager li {
      border-radius: 14px;
      background: rgba(255, 255, 255, 1);
      border: 1px rgba(167, 167, 167, 0.3) solid;
    }

    /deep/ .btn-prev {
      border-radius: 14px;
      padding: 0 10px;
    }

    /deep/ .btn-next {
      border-radius: 14px;
      padding: 0 10px;
    }

    .t_add_cont {
      padding: 30px 10px;
    }

    .t_tips_box {
      background-color: #EEF7FF;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      padding: 20px;
      color: #7D7D7D;
      margin-bottom: 20px;
    }

    .t_chatkf {
      color: #237BFF;
      margin-left: 20px;
      cursor: pointer;
    }

    .back {
      color: black;
      margin-bottom: 15px;
      display: block;
    }

    .t_btn_box {
      display: flex;
      justify-content: end;
    }

    .see {
      color: #409EFF;
      margin: 20px 0;
      cursor: pointer;
    }

    .cpflex {
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin-bottom: 0px;
      }
    }

    .kucun {
      /deep/ .el-input {
        width: 200px;
      }

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }



    .o_ul {
      background: #F9F9F9;
      display: flex;

      .o_li {
        flex-basis: 160px;
        line-height: 45px;
        display: block;
        color: #727272;
        border-top: 3px #F9F9F9 solid;
        font-size: 14px;
        text-align: center;
      }

      .act {
        border-top: 3px #DD2727 solid;
        background: #FFFFFF;
      }
    }

    .title {
      border-bottom: 1px #EAEAEA solid;
      line-height: 45px;
      padding-left: 30px;
      font-size: 16px;
      background: #F9F9F9;
      color: #727272
    }

    .bsm {
      padding: 20px 20px 0 20px;

      .el-input {
        width: 220px;
      }
    }

    .row2 {
      color: #FFF;
      margin-top: 20px;

      a {
        color: #FFF;
      }
    }

    .con {
      margin: 20px;
      border: 1px #EAEAEA solid;

      .list {
        display: flex;
        text-align: center;
        border-bottom: 1px #EAEAEA solid;

        .bor1 {
          border-right: 1px #EAEAEA solid;

          i {
            color: #409EFF;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
        }

        .th {
          background: #F9F9F9;
          line-height: 45px;
          flex: 1;
          font-size: 14px;
          box-sizing: border-box;
        }

        .td {
          line-height: 45px;
          font-size: 14px;
          flex: 1;
          box-sizing: border-box;
          color: #666;
        }

        .td2 {
          flex: 1.5
        }
      }
    }

    .el-pagination {
      text-align: right;
      margin-right: 20px;
      padding-bottom: 50px;
    }


  }
</style>
